<template>
  <div>
    <AddrGroupTools v-bind:multipleSelection="multipleSelection" @listData='listData'></AddrGroupTools>
    <el-table size='mini' ref="multipleTable" :data="addr_group_list" tooltip-effect="dark" header-align="center" align="center" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column align='center' type="selection" width="55">
      </el-table-column>
      <el-table-column align='center' prop="id" width="70" label="ID">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column align='center' prop="name" min-width="150" :label="$t('地址组名称')">
        <template slot-scope="scope">
          <tooltip :html="scope.row.name" :content="scope.row.name" class="wid190" :refName="scope.row.name">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="desc" min-width="150" :label="$t('描述')">
        <template slot-scope="scope">
          <tooltip :html="scope.row.desc" :content="scope.row.desc" class="wid190" :refName="scope.row.desc">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="member" :label="$t('地址对象')" :formatter="handel_array" min-width="150">
        <template slot-scope="scope">
          <tooltip :html="classMapShow(scope.row,';<br/>')" :content="classMapShow(scope.row,',')" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="ref" :label="$t('引用计数')" width="120">
      </el-table-column>
      <el-table-column align='center' prop="sys" fixed="right" :label="$t('操作')" width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.sys === 0" type="success" plain size="mini" :class="'edit' + scope.$index" @click="get_addr_group_info(scope.row)">
            {{$t('编辑')}}
          </el-button>
          <span v-if="scope.row.sys === 1">{{$t('系统默认')}}</span>
        </template>
      </el-table-column>
    </el-table>
    <AddrGroupEdit :addr_info="addr_info" :editVisible="editVisible" :tableData="tableData" @quxiao="change($event)" @listData='listData'></AddrGroupEdit>
  </div>
</template>

<script>
import AddrGroupTools from './AddrGroupTools'
import AddrGroupEdit from './AddrGroupEdit'
import { getAddrGroupArray, getAddrGroupInfo } from '@/api/list/addr-group'
export default {
  name: 'AddrGroup',
  components: {
    AddrGroupTools,
    AddrGroupEdit
  },
  data () {
    return {
      addr_group_list: [],
      addr_info: {},
      tableData: [],
      editVisible: false,
      multipleSelection: []
    }
  },
  mounted () {
    this.listData()
  },
  methods: {
    listData () {
      getAddrGroupArray().then(response => {
        this.addr_group_list = response.info
      })
    },
    change (data) {
      this.editVisible = data
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handel_array (row) {
      let test = ''
      row.member.forEach((item, index, array) => {
        if (index === row.member.length - 1) {
          test += item
        } else {
          test += item + ','
        }
      })
      return test
    },
    get_addr_group_info (row) {
      getAddrGroupInfo({ name: row.name }).then(response => {
        this.tableData = []
        this.addr_info = response.info[0]
        this.editVisible = true
      })
    },
    classMapShow (data, str) {
      let reStr = ''
      data.member.forEach((val, index) => {
        if (index < 1 && str === ',') {
          reStr += val
        } else if (str === ',') {
          reStr += str + val
        } else {
          reStr += val + str
        }
      })
      return reStr
    }
  }

}
</script>

<style scoped>
</style>
